@extends('layouts.admin-iframe-base')


@section('css')
    <style>
        .add-group a {
            color: #777;
        }

        .add-group a:hover {
            color: #333;
        }

        .add-group h3 {
            text-align: center;
            margin-top: 30px;
        }
    </style>
    @stop

    @section('content')
            <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            用户管理
            <small>用户电站</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">首页</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Your Page Content Here -->
        <div class="row">
            @foreach($groups as $g)
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-cubes"></i></span>

                        <div class="info-box-content">
                            <a href="javascript:;" class="pull-right J-del-group-btn" data-id="{{$g->id}}"><i
                                        class="fa fa-trash"></i></a>
                            <span class="info-box-text"><strong>{{$g->name}}</strong></span>

                            <p>{{$g->place}}<br>设备数量：{{$g->devices_count}}</p>

                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
            @endforeach
            <div class="col-md-3 col-sm-6 col-xs-12 add-group">
                <a href="/admin/group/create-user-group?user_id={{$user->id}}&site_id={{$site->id}}">
                    <div class="info-box">
                        <span class="info-box-icon"><i class="fa fa-plus"></i></span>

                        <div class="info-box-content">
                            <h3>添加分组</h3>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </a>
            </div>

            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#sites" data-toggle="tab">设备列表</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="active tab-pane" id="sites">
                            <table id="J-dt" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>设备ID（与硬件一致）</th>
                                    <th>S/N</th>
                                    <th>所属分组</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <a href="/admin/device/create-site-device?site_id={{$site->id}}"
                               class="btn btn-primary btn-sm">添加设备</a>
                        </div>
                        <!-- /.tab-pane -->

                    </div>
                    <!-- /.tab-content -->
                </div>
            </div>
        </div>
        <!-- /.box -->

    </section>
    <!-- /.content -->


@stop

@section('js')
    <script src="/dist/admin/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/dist/admin/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script>

        $(function () {
            $('#J-dt').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "ajax": {
                    "url": "/admin/device/site-device?site_id={{$site->id}}",
                    "type": "post"
                },
                "columns": [
                    {"data": "name"},
                    {"data": "device_id"},
                    {"data": "sn"},
                    {"data": "group.name", "defaultContent": "暂无分组"},
                    {"data": "id"}
                ],
                "columnDefs": [
                    {
                        "targets": -1,
                        "render": function (data, type, row) {
                            var str = '<a href="/admin/device/edit-site-device?id=' + data + '&site_id={{$site->id}}&user_id={{$user->id}}" class="btn btn-info btn-sm">编辑</a> &nbsp;';
                            str = str + '<a href="javascript:;" class="btn btn-danger btn-sm J-del-btn" data-id="' + data + '">删除</a>';
                            return str;
                        }
                    }

                ]
            });
            $('#J-dt').on('click', '.J-del-btn', function () {
                var id = $(this).data('id');
                var params = {
                    id: id
                };
                $.post('/admin/device/delete-device', params, function (res) {
                    if (res.status == 1) {
                        alert('删除成功！');
                        window.location.reload();
                    } else {
                        alert(res.error_msg);
                    }
                }, 'json');
            });

            $('.J-del-group-btn').click(function () {
                if (confirm('确认删除分组？')) {
                    var params = {
                        id: $(this).data('id')
                    };
                    $.post('/admin/group/delete-group', params, function (res) {
                        if (res.status == 1) {
                            alert('删除成功！');
                            window.location.reload();
                        } else {
                            alert(res.error_msg);
                        }
                    }, 'json');
                }


            });

        });


    </script>
@stop